<script setup>
import { loadLanguageAsync } from '@/i18n/index.js'
import useAppStore from '@/store/modules/app.js'
import useLoadingStore from '@/store/modules/loading.js'
import { storage } from '@/utils/storage.js'
import { arDZ, darkTheme, dateArDZ, dateEnUS, dateEsAR, dateFrFR, dateRuRU, dateZhCN, enUS, esAR, frFR, ruRU, zhCN } from 'naive-ui'
import { RouterView } from 'vue-router'
import { useThemeVars } from 'naive-ui'
const locale = ref(zhCN)
const dateLocale = ref(dateZhCN)
const appStore = useAppStore()
const loadingStore = useLoadingStore()
const themeOverrides = reactive({
  common: {
    primaryColor: '#007bff',
    primaryColorHover: '#0062cc',
    primaryColorPressed: '#005cbf',
    primaryColorSuppl: '#005cbf',
    borderRadius: '6px',
    borderRadiusSmall: '4px',
    cubicBezierEaseInOut: 'cubic-bezier(0.65, 0, 0.35, 1)',
    cubicBezierEaseOut: 'cubic-bezier(0.33, 1, 0.68, 1)',
    cubicBezierEaseIn: 'cubic-bezier(0.32, 0, 0.67, 0)',
  },
  Statistic: {
    labelFontWeight: 400,
    valueFontWeight: 800,
  },
})
const darkThemeOverrides = reactive({
  common: {
    primaryColor: '#007bff',
    primaryColorHover: '#0062cc',
    primaryColorPressed: '#005cbf',
    primaryColorSuppl: '#005cbf',
    borderRadius: '6px',
    borderRadiusSmall: '4px',
    cubicBezierEaseInOut: 'cubic-bezier(0.65, 0, 0.35, 1)',
    cubicBezierEaseOut: 'cubic-bezier(0.33, 1, 0.68, 1)',
    cubicBezierEaseIn: 'cubic-bezier(0.32, 0, 0.67, 0)',
  },
  Button: {
    textColorPrimary: '#fff',
    textColorHoverPrimary: '#fff',
  },
})
const themeVars = useThemeVars()

console.log(themeVars.value)

appStore.$subscribe((mutation, state) => {
  setProviderLocal(state.language)
})

onMounted(() => {
  getSystemLocal()
  setProviderLocal(appStore.language)
  handleWatchDarkMode()
})

function handleWatchDarkMode() {
  const darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
  appStore.setColorScheme(darkMode ? 'dark' : 'light')
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    appStore.setColorScheme(e.matches ? 'dark' : 'light')
  })
}

function getSystemLocal() {
  const lang = navigator.language
  const systemLanguage = lang === 'zh-CN' ? lang : lang.split('-')[0]
  const language = storage.get('language') || systemLanguage
  appStore.setLanguage(language)
  loadLanguageAsync(language)
}

function setProviderLocal(langKey) {
  const langMap = {
    'zh-CN': {
      date: dateZhCN,
      lang: zhCN,
    },
    'en': {
      date: dateEnUS,
      lang: enUS,
    },
    'ru': {
      date: dateRuRU,
      lang: ruRU,
    },
    'es': {
      date: dateEsAR,
      lang: esAR,
    },
    'fr': {
      date: dateFrFR,
      lang: frFR,
    },
    'ar': {
      date: dateArDZ,
      lang: arDZ,
    },
  }

  const { date, lang } = langMap[langKey] // 重命名解构出来的 lang 为 localeLang
  locale.value = lang
  dateLocale.value = date
}
</script>

<template>
  <n-config-provider
    :locale="locale"
    :date-locale="dateLocale"
    :theme-overrides="appStore.colorScheme === 'dark' ? darkThemeOverrides : themeOverrides"
    :theme="appStore.colorScheme === 'dark' ? darkTheme : null"
  >
    <n-spin :show="loadingStore.show" :description="loadingStore.description">
      <n-global-style />
      <RouterView v-if="appStore.reloadFlag" />
    </n-spin>
    <!-- 消息 -->
    <n-message-provider>
      <UseMessage />
    </n-message-provider>
    <!-- 通知 -->
    <n-notification-provider>
      <UseNotification />
    </n-notification-provider>
    <!-- 对话框 -->
    <n-dialog-provider>
      <UseDialog />
    </n-dialog-provider>
  </n-config-provider>
</template>

<style scoped>

</style>
